<!--
 * @Author: your name
 * @Date: 2020-08-13 16:44:36
 * @LastEditTime: 2020-08-18 18:29:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\map\TxMap.vue
-->
<template>
<div class="container">
    <van-nav-bar title="腾讯地图" :border="false" left-arrow fixed @click-left="$router.go('-1')" />
    <van-field
        left-icon="location-o"
        v-model="address"
        center
        clearable
        label='地址'
        placeholder="请输入地址"
        @keyup.enter="search"
        >
        <template #button>
            <van-button size="small" type="primary" @click="search">搜索</van-button>
        </template>
    </van-field>
    <p>
    {{JSON.stringify(result)}}
    </p>
</div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            address:"",
            result:{}
        }
    },
    mounted(){
    },
    methods:{
        // 搜索
        // key = EFQBZ-UOECW-TXCRN-RUZQN-MAMRV-UWF22 示例 OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
        search(){
            if(this.address)
            axios.get(`/ws/geocoder/v1/?address=${this.address}&key=EFQBZ-UOECW-TXCRN-RUZQN-MAMRV-UWF22`).then(res=>{
                console.log("res",res)
                if(res.data.status == 0) {
                    this.result = res.data.result;
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    overflow-x:hidden;
    word-break: break-all;
}
</style>